<template>
   <div class="wholescreen" >

   <el-row :gutter="20">
     <el-col :span="6"  >
         <el-card class="box-card tree-wrapper">
             <el-row :gutter="10">
                <el-col :span="24"  >
                  <CatalogTree :onObjectNodeClick="onObjectNodeClick">

     		      </CatalogTree>
     		    </el-col>
     		 </el-row>
          </el-card>
     </el-col>

     <el-col :span="18" >
          <router-view></router-view>
     </el-col>
    </el-row>
   </div>
</template>

<script>
    import Vue from 'vue';

    import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
    Vue.component("el-collapse-transition", CollapseTransition)

    import {Col,Row,Card,Button } from 'element-ui'
	  Vue.component(Col.name, Col)
	  Vue.component(Row.name, Row)
	  Vue.component(Card.name, Card)
	  Vue.component(Button.name, Button)
    import 'element-ui/lib/theme-default/row.css';
	import 'element-ui/lib/theme-default/col.css';
	import 'element-ui/lib/theme-default/card.css';
	import 'element-ui/lib/theme-default/button.css';
	import CatalogTree from './components/CatalogTree.vue'

	
    export default {
        data () {
            return {
              isloading:false
            }
        },
		components:{CatalogTree},
        mounted() {
        }
		,methods:{

      onObjectNodeClick(obj ,node ,self){
				  console.log(obj,node,self)
				
				  if(obj.TYPE=='VIEW' || obj.TYPE=='TABLE' || obj.TYPE=='FUNCTION' || obj.TYPE=='PROCEDURE'){
				       this.$router.push("/view/"+obj.OBJECTSCEMA+"/"+obj.TYPE+"/"+obj.NAME);
				  }
				
				
				
				}
		     


		}
    }
</script>

<style>
.wholescreen{
  width:90%;
}
.tree-wrapper{
  width:100%;
  height:550px;
  overflow:auto !important;
}


</style>